
<header class="mui-bar mui-bar-nav header">
  <div class="mui-icon mui-pull-left mui-action-menu" style="padding-top: 10px"><span style="font-size: 20px">品牌类目</span></div>
  <h1 class="mui-title"><%= cat%></h1>
  <div class="mui-icon mui-pull-right"><i class="iconfont">&#xe603;</i></div>
</header>
<div class="mui-content">
  <div class="search" style="display: none">
    <div class="mui-input-row mui-search mui-active">
      <input type="search" class="mui-input-clear" placeholder="" onkeyup="enterSearch(event)" data-input-clear="1" data-input-search="1"><span class="mui-icon mui-icon-clear mui-hidden"></span><span class="mui-placeholder"><span class="mui-icon mui-icon-search"></span><span>搜索商品</span></span>
    </div>
  </div>
  <!--图片轮播-->
  <div class="title"><img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/categories/<%= encodeURI(cat)%>.jpg"/></div>
  <ul class="wrapper">
    <% for(var i=0; i<data.length; i++){%>
    <li>
      <a href="/products/<%= data[i].sn%>">
        <div class="pic">
          <img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/<%= data[i].sn%>_thumb.jpeg" />
        </div>
        <div class="text">
          <h2><%= data[i].name%></h2>
          <p><span>品牌：</span><%= data[i].brand%></p>
          <p><span>型号：</span><%= data[i].model%></p>
          <p><span>英文名：</span><%= data[i].pinyin%></p>
        </div>
        <div class="price">
          <%
            var cny_price = Number(data[i].msrp*rate).toFixed(2);
          %>
          <h3>$<%= data[i].msrp%><br>¥<%= cny_price%></h3>
          <button>立即抢购</button>
        </div>
      </a>
    </li>
    <% }%>
  </ul>
  <div id="pull-refresh" style="height: 50px">
    <p>下拉获取更多商品</p>
  </div>
</div>
<div class="jl"></div>
<nav class="mui-bar mui-bar-tab">
  <a class="mui-tab-item" href="/">
    <span class="mui-icon "><i class="iconfont">&#xe601;</i></span>
    <span class="mui-tab-label">首页</span>
  </a>
  <a class="mui-tab-item mui-active" href="/list">
    <span class="mui-icon mui-icon-list"></span>
    <span class="mui-tab-label">列表</span>
  </a>
  <a class="mui-tab-item" href="/cart">
    <span class="mui-icon"><i class="iconfont">&#xe600;</i></span>
    <span class="mui-tab-label">购物车</span>
  </a>
  <a class="mui-tab-item" href="/account">
    <span class="mui-icon"><i class="iconfont">&#xe654;</i></span>
    <span class="mui-tab-label">我的</span>
  </a>
</nav>
<script>
  $('.mui-pull-right').click(function () {
    $('.search').fadeToggle();
  });

  function enterSearch(e) {
    if (e.keyCode == 13) {
        var q = $('.mui-input-clear').val();
        var cat = '<%= cat%>';
        $.get('/api/search/?q='+q+'&cat='+cat, function (call) {
          console.log(call);
          var html = '';
          for(var i=0; i<call.length; i++){
            html += '<li><a href="/products/'+call[i].sn+'"><div class="pic"><img src="/images/qcp.png" /></div><div class="text"><h2>'+call[i].brief_name+'</h2><p><span>品牌：</span>'+call[i].brand+'</p><p><span>型号：</span>'+call[i].model+'</p><p><span>英文名：</span>'+call[i].pinyin+'</p></div><div class="price"><h3>$'+call[i].msrp+'<br>¥'+call[i].msrp*5+'</h3><button>立即抢购</button></div></a></li>'
          };
          $('.wrapper').html(html);
        })
    }
  }
</script>
<script>
  var picker = new mui.PopPicker();
  var category = '<%= cat%>';
  $.get('/api/brands/?category='+category, function (call) {
    var brands_list = JSON.parse(call);
    brands_list.push('全部品牌');
    picker.setData(brands_list);
    $('.mui-action-menu').click(function () {
      picker.show(function (selectItems) {
        console.log(selectItems[0]);
        if (selectItems[0] == '全部品牌') {
            window.location.href = '/product_list/'+category;
        } else {
          var selected_brand = selectItems[0];
          $.get('/api/products/?brand=' + selected_brand, function (call) {
            console.log('products:', JSON.parse(call));
            var html = '';
            var call = JSON.parse(call);
            for (var i = 0; i < call.length; i++) {
              html += '<li><a href="/products/' + call[i].sn + '"><div class="pic"><img src="/images/qcp.png" /></div><div class="text"><h2>' + call[i].brief_name + '</h2><p><span>品牌：</span>' + call[i].brand + '</p><p><span>型号：</span>' + call[i].model + '</p><p><span>英文名：</span>'+call[i].pinyin+'</p></div><div class="price"><h3>$' + call[i].msrp + '<br>¥' + call[i].msrp * 5 + '</h3><button>立即抢购</button></div></a></li>';
            }
            ;
            console.log('products:', html);
            $('.wrapper').html(html);
          })
        }
      })
    })
  })
  $(function () {
    sessionStorage.setItem('offset', 20);
  })
</script>

<script>
  mui.init({
    pullRefresh : {
      container: mui('#pull-refresh'),
      up : {
        height:50,
        auto:false,
        contentrefresh : "正在加载...",
        contentnomore:'没有更多商品了',
        callback : function pullRefresh() {1
          var offset = sessionStorage.getItem('offset')
          $.get('/api/products/<%= cat%>/?offset='+offset, function (call) {
            console.log(call);
            if (call.length > 0){
              var html = '';
              for (var i=0; i<call.length; i++){
                var cny = Number(call[i].msrp)*Number(sessionStorage.getItem('rate'));
                html += '<li><a href="/products/'+call[i].sn+'"><div class="pic"><img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/'+call[i].sn+'_thumb.jpeg" /></div><div class="text"><h2>'+call[i].name+'</h2><p><span>品牌：</span>'+call[i].brand+'</p><p><span>型号：</span>'+call[i].model+'</p><p><span>英文名：</span>'+call[i].pinyin+'</p></div><div class="price"><h3>$'+call[i].msrp+'<br>¥'+cny.toFixed(2)+'</h3><button>立即抢购</button></div></a></li>';
              }
              $('.wrapper').append(html);
              sessionStorage.setItem('offset', Number(offset)+20);
              mui('#pull-refresh').pullRefresh().endPullupToRefresh(false);
            } else {
              mui('#pull-refresh').pullRefresh().endPullupToRefresh(true);
            }
          })
        }
      }
    }
  });
</script>
